<!DOCTYPE html>
<html lang="en">

<head>
    <title>goodsDetail</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link href="../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="../static/css/ken-burns.css" rel="stylesheet" type="text/css" media="all" /> <!-- 轮播图样式 -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"><!-- 图标样式 -->
    <link rel="stylesheet" type="text/css" href="../static/css/goodDetail.css">
    <link rel="stylesheet" href="../static/css/flexslider.css" type="text/css" media="screen" /><!-- 放大镜样式 -->
    <link rel="stylesheet" href="../static/css/share.min.css"><!-- 分享插件 -->

    <script src="../static/js/jquery-2.2.3.min.js"></script>
    <script src="../static/js/jquery-scrolltofixed-min.js" type="text/javascript"></script><!-- 导航栏 -->
    <script type="text/javascript" src="../static/js/move-top.js"></script>
    <script type="text/javascript" src="../static/js/easing.js"></script>
    <script src="../static/js/bootstrap.js"></script>
    <script defer src="../static/js/jquery.flexslider.js"></script><!-- 放大镜 -->
    <script src="../static/js/imagezoom.js"></script><!-- 放大镜遮罩层 -->
    <script src="../static/js/main.js"></script>
    <script src="../static/js/jquery.menu-aim.js"></script>
    <script src="../static/js/custom.js"></script>
    <script src="../static/js/goodsDetail.js"></script>
    <script src="../static/js/jquery.share.min.js"></script>
    <script src="../static/js/magnifier.js"></script>


</head>

<body>
<div id="goodsdetail">

    <div class="header">
        <div class="header">
            <div class="w3ls-header">
                <div class="w3ls-header-left">
                    <p>
                        <a href="#"><img style="position: relative;left: -10px; top: -1px" src="../static/images/shopping.png">
                            XB全新高端购物平台
                        </a>
                    </p>
                </div>
                <div class="w3ls-header-right">
                    <ul>
                        <li class="dropdown head-dpdn">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"
                                                                                          aria-hidden="true"></i>{{name}}<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="/view/profile">个人中心</a></li>
                              <li><a  @click="logout()">注销</a></li>
                            </ul>
                        </li>
                        <li class="dropdown head-dpdn">
                            <a href="/view/car" class="dropdown-toggle"><i class="fa fa-gift"
                                                                          aria-hidden="true"></i>购物车</a>
                        </li>
                        <li class="dropdown head-dpdn">
                             <a href="/view/waitPay" class="dropdown-toggle"><i class="fa fa-credit-card-alt"
                                                                              aria-hidden="true"></i>待支付</a>
                        </li>
                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="header-two">
                <div class="container">
                    <div class="header-logo">
                        <h1><a href="home.html"><span>X</span>Biao </a></h1>
                        <h6>Your stores. Your place.</h6>
                    </div>
                    <div class="header-search">
                        <form action="#" method="post">
                            <input type="search" name="Search" placeholder="Search for a Product..." required="">
                            <button type="submit" class="btn btn-default" aria-label="Left Align">
                                <i class="fa fa-search" aria-hidden="true"> </i>
                            </button>
                        </form>
                    </div>
                    <div class="header-cart">
                        <div class="my-account">
                            <a href="javascript:;"></a>
                        </div>
                        <div class="cart">
                           <a href="/view/car">
                                <button class="w3view-cart" type="submit" name="submit" value=""><i
                                        class="fa fa-cart-arrow-down" aria-hidden="true"></i></button>
                            </a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <!--目录-->
            <div class="header-three">
                <div class="container">
                    <ul class="nav nav-pills nav-justified" >
                        <li v-for="catList in catalogue">
                            <a href="/view/productList" @click="findByCategory(catList.category)">{{catList.category | judge}}</a>
                            <!--                            -->
                        </li>  <!--1-->
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="products">
        <div class="container">
            <ol class="breadcrumb breadcrumb1">
                <li><a href="home.html">Home</a></li>
                <li class="active">商品详情</li>
            </ol>
            <div class="single-page">
                <div class="single-page-row" id="detail-21">
                    <div class="col-md-6 col-sm-6 single-top-left">
                        <div id="magnifier">
                            <div class="small-box">
                                <img :src="goodsdetailInfo.mainimage" alt="#">
                                <span class="hover"></span>
                                <span class="hover"></span>
                            </div>
                            <div class="big-box">
                                <img src="../static/images/big_1.jpg" alt="#">
                            </div>
                            <div class="thumbnail-box">
                                <a href="javascript:;" class="btn btn-prev btn_prev_disabled"></a>
                                <a href="javascript:;" class="btn btn-next"></a>
                                <div class="list">
                                    <ul class="wrapper">
                                        <li class="item item-cur" data-src="images/big_1.jpg"><img
                                                src="../static/images/big_1.jpg" alt="#"></li>
                                        <li class="item" data-src="images/big_2.jpg"><img src="../static/images/big_2.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_3.jpg"><img src="../static/images/big_3.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_4.jpg"><img src="../static/images/big_4.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_5.jpg"><img src="../static/images/big_5.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_6.jpg"><img src="../static/images/big_6.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_2.jpg"><img src="../static/images/big_2.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_3.jpg"><img src="../static/images/big_3.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_4.jpg"><img src="../static/images/big_4.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_5.jpg"><img src="../static/images/big_5.jpg"
                                                                                          alt="#">
                                        </li>
                                        <li class="item" data-src="images/big_6.jpg"><img src="../static/images/big_6.jpg"
                                                                                          alt="#">
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-6 single-top-right">
                        <h3 class="item_name">{{goodsdetailInfo.title}}</h3>
                        <p>{{goodsdetailInfo.desc}}</p>
                        <div class="single-rating">
                            <ul>
                                <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                <li><i class="fa fa-star-o" aria-hidden="true"></i></li>
                                <li class="rating">浏览量：{{goodsdetailInfo.visit}}</li>
                            </ul>
                        </div>
                        <div class="single-price">
                            <ul>
                                <li class="goodsMoney">${{goodsdetailInfo.price}}</li>
                                <li>发布时间:{{goodsdetailInfo.publishdate}}</li>
                                <li><i class="fa fa-gift" aria-hidden="true"></i> Coupon</li>
                            </ul>
                        </div>

                        <div class="numActive row">
                            <div class="col-lg-6 col-sm-6">
                                <span>数量:</span>
                                <div class="input-group">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default sub" type="button" @click="reduce()">-</button>
                                    </span>
                                    <input type="text" class="num form-control" value="1" v-model="goodstotal">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default add" type="button" @click="add()">+</button>
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-6">
                                <div class="input-group">
                                    <p class="totalMoney">${{goodsdetailInfo.price*goodstotal}}</p>
                                </div>
                            </div>
                        </div>
                        <!-- <a href="/view/car">-->
                        <!--添加數量-->
                       <td>
                            <button class="w3ls-cart" v-if="carBtn==1"  @click="updateCart()" ><i class="fa fa-cart-plus" aria-hidden="true" ></i>加入购物车</button>
                            <button class="w3ls-cart" v-else-if="carBtn==0"  @click="addCart()"><i class="fa fa-cart-plus" aria-hidden="true"  ></i>加入购物车</button>
                        </td>
                        <td >
                            <button class="w3ls-cart w3ls-cart-like" @click="deleteFavor()" v-if="collectBtn==1" >
                                <i class="fa fa-heart-o" aria-hidden="true"></i>取消收藏
                            </button>
                            <button class="w3ls-cart w3ls-cart-like" @click="addFavor()"  v-else-if="collectBtn==0">
                                <i class="fa fa-heart-o" aria-hidden="true"></i>收藏
                            </button>
                        </td>

                        <div class="single-page-icons social-icons">
                            <ul>
                                <li>
                                    <h4>Share on</h4>
                                </li>
                                <li class="social-share" data-sites="weibo"></li>
                                <li class="social-share" data-sites="qq"></li>
                                <li class="social-share" data-sites="wechat"></li>
                                <li class="social-share" data-sites="qzone"></li>
                            </ul>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>

            </div>
        </div>
    </div>

    <!--最热商品-->
    <div class="add-products">
        <h3 class="w3ls-title">热卖商品</h3>
        <div class="container">
            <div class="add-products-row">
                <div class=" w3ls-add-grids" v-for="hotlist in hotListImg.data">
                    <a href="/view/goodsDetail">
                        <img :src="hotlist.mainimage">
                        <p>{{hotlist.title}}<span>&nbsp&nbsp&nbsp${{hotlist.price}}</span>&nbsp&nbsp&nbsp库存:{{hotlist.repertory}} </p>
                        <span>Shop now <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></span>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <div class="copy-right">
        <div class="container">
            <p>Copyright &copy; 2020.XB All rights reserved.<a target="_blank" href="#"></a></p>
        </div>
    </div>
</div>




</body>
<script>
    $(function () {
        $('#magnifier').magnifier();
    });
</script>
<script src="/static/js/custom.js"></script>
<script  src="/static/js/layer.js"></script>
<script src="/static/js/jquery-2.2.3.min.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/axios.js"></script>
<script src="/static/js/shop/goodsDetails.js"></script>

</html>